<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>波浪线</title>
  <script src="lodash.min.js"></script>
</head>
<body>
<canvas id="canvas" width="800" height="800"></canvas>
<script>
  var option = [
    {
      start: {
        x: -100,
        y: 250
      },
      opacity: 15, // 透明度
      interval: 200, // 间隔
      color: 'blue', // 颜色
      radian: 20,
      length: 11,
      steep: 4,
      resize: 400
    },{
      start: {
        x: -50,
        y: 260
      },
      opacity: 40, // 透明度
      color: 'blue', // 颜色
      interval: 120, // 间隔
      radian: 16,
      length: 15,
      steep: 8,
      resize: 480
    },{
      start: {
        x: -50,
        y: 250
      },
      opacity: 20, // 透明度
      color: 'blue', // 颜色
      interval: 175, // 间隔
      radian: 15,
      length: 11,
      steep: 5,
      resize: 350
    }
  ];
  var canvas = document.getElementById('canvas');

  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');




    function create(options) {
      var { start, interval, radian, length } = options || {}

      // console.log(options)
      // 二次贝塞尔曲线
      ctx.beginPath();
      ctx.moveTo(0, canvas.height);
      ctx.lineTo(0, canvas.height);
      ctx.lineTo(0, start.y);
      ctx.lineTo(start.x, start.y);


      function createCurve(options) {
        var { start, interval, radian, length } = options || {}
        for(var i = 1; i < length; i++) {
          var x = interval*i - interval/2 + start.x;
          var y =  i%2 ?  start.y + radian :  start.y - radian;

          // console.log(x, y, x, y, i*interval, start.y)
          ctx.bezierCurveTo(x, y, x, y, i*interval + start.x,  start.y);
        }
      }
      createCurve(options)

      ctx.lineTo(start.x + length * interval, canvas.height);

      ctx.fill();
    }

    function step() {

      ctx.clearRect(0,0, canvas.width, canvas.height);

      for(var i = 0; i < option.length; i++) {
        option[i].start.x += option[i].steep ;
        ctx.globalAlpha = option[i].opacity / 100;
        ctx.fillStyle = option[i].color;

        if(option[i].start.x >= 0) {
          option[i].start.x = -option[i].resize
        }
        create(option[i])

      }
      window.requestAnimationFrame( _.debounce(step, 50));
    }
    window.requestAnimationFrame(_.debounce(step, 50));
  }

</script>
</body>
</html>
